<template>
  <div class="login">
    <div class="header">
      <van-icon class="icon" @click="toHome" name="wap-home-o" />
      <div class="title">网易严选</div>
      <van-icon class="icon" @click="toSearch" name="search" />
      <van-icon class="icon" @click="toCart" name="cart-o" />
    </div>
    <div class="main">
      <img src="//yanxuan.nosdn.127.net/static-union/164793255107785e.png" />
      <van-button class="phon btn" @click="toLoginPage" color="#DD1A21" type="danger"><van-icon
          name="bookmark-o" />手机号快捷登录</van-button>
      <van-button class="email btn" @click="toRegister" color="#DD1A21" plain><van-icon class="small-icon"
          name="envelop-o" />手机号注册</van-button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

// 跳转登录页面
function toLoginPage() {
  router.push('/loginpage')
}
// 跳转注册页面
function toRegister() {
  router.push('/register')
}
// 跳转首页页面
function toHome() {
  router.push('/home')
}
function toSearch() {
  router.push('/search')
}
function toCart() {
  router.push('/cart')
}
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 667px;
  background-color: #F2F5F4;

  .header {
    height: 44px;
    background-color: white;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;

    .icon {
      font-size: 30px;
      padding-left: 10px;
    }

    .title {
      font-size: 20px;
      font-weight: 700;
      margin-left: 110px;
      margin-right: 50px;
    }
  }

  .main {
    text-align: center;

    img {
      width: 134px;
      height: 45px;
      margin-top: 80px;
      margin-bottom: 50px;
    }

    .btn {
      width: 335px;
      margin-bottom: 16px;

      .small-icon {

        margin-right: 10px;
      }
    }

    .phon {}

    .email {}
  }

}
</style>